<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language= "java" contentType="text/html;charset=UTF-8"%> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>资产科目管理</title>
        <link type="text/css" href="<c:out value='${pageContext.request.contextPath}'/>/resources/css/redmond/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
        <link type="text/css" href="<c:out value='${pageContext.request.contextPath}'/>/resources/css/screen.css" rel="Stylesheet" />
        <script type="text/javascript" src="<c:out value='${pageContext.request.contextPath}'/>/resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="<c:out value='${pageContext.request.contextPath}'/>/resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="<c:out value='${pageContext.request.contextPath}'/>/resources/js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<c:out value='${pageContext.request.contextPath}'/>/resources/js/jquery.form.js"></script>


        <script type="text/javascript">

            //创建该分类的时候调用
            function setButtonEvent(id, parentId) {
                //小分类的按钮事件
                if (parentId) {
                    $( "#delete-subitem-" + id )
                    .button()
                    .click(function(){
                        $.ajax({url: "<c:out value='${pageContext.request.contextPath}'/>/assettype/remove/" + id,
                            type: "DELETE",
                            success: function(data){
                            $("#subitem-" + parentId + "-" + id).remove();
                        }});

                    });
                //大分类的按钮事件
                } else {
                    $( "#delete-item-" + id )
                    .button()
                    .click(function(){
                        $.ajax({url: "<c:out value='${pageContext.request.contextPath}'/>/assettype/remove/" + id,
                            type: "DELETE",
                            success: function(){
                                $("tr[id^=subitem-" + id + "]").remove();
                                $("#item-" + id).remove();
                            }
                        });
                    });



                    $( "#create-subitem-" + id )
                    .button()
                    .click(function(evt) {
                        $("input#assetType-pid").val(id);
                        $( "#dialog-form" ).dialog( "open" );
                    });
                }
            }


            //创建大类
            function createItemRow(id, name) {
                return "<tr id='item-" + id + "'>"
                         + "<td>" + id + "</td>"
                         + "<td>" + name + "</td>"
                         + "<td/>"
                         + "<td>"
                         +     "<button id='create-subitem-" + id + "' class='create-subitem'>创建小类</button>"
                         +     "<button id='delete-item-" + id + "' class='delete-item'>删除大类</button>"
                         + "</td>"
                       + "</tr>";
             }

            //创建小类
            function createSubitemRow(id, name, parentId) {
               return "<tr id='subitem-" + parentId + "-" + id + "'>"
                         + "<td>" + id + "</td>"
                         + "<td>&nbsp;&nbsp;|-</td>"
                         + "<td>" + name + "</td>"
                         + "<td>"
                         +     "<button id='delete-subitem-" + id + "' class='delete-subitem'>删除小类</button>"
                         + "</td>"
                       + "</tr>";
             }

            $().ready(function(){
                  $( "#dialog-form" ).dialog({
                      autoOpen: false,
                      height: 300,
                      width: 350,
                      modal: true,
                      buttons: {
                          "创建": function() {
                             $("#create-item-form").submit();

                          },
                          "关闭": function() {
                              resetCreateItemForm();
                              $( this ).dialog( "close" );
                          }
                      },
                      close: function() {
                          resetCreateItemForm();
                      }
                  });


                $( "#create-item" )
                  .button()
                  .click(function() {
                      $( "#dialog-form" ).dialog( "open" );
                  });


                  //validation
                  $("#create-item-form input#assetType-name")
                      .attr("class","required")
                      .attr("minlength", "1");
                  $("#create-item-form").validate();
                  //$("#create-item-form").attr("class", "cmxform");

                  $('#create-item-form').ajaxForm({
                        // dataType identifies the expected content type of the server response
                        dataType:  'json',

                        // success identifies the function to invoke when the server response
                        // has been received
                        success:   processJson
                    });

              });

              function processJson(data) {
                    // 'data' is the json object returned from the server
                    //创建一个小类
                    if(data.parentId) {
                        $(createSubitemRow(data.id, data.name, data.parentId)).insertAfter($("#item-" + data.parentId));
                        setButtonEvent( data.id, data.parentId);
                    } else {
                        //创建一个大类
                        $("#item-table-body").prepend($(createItemRow(data.id, data.name)));

                        setButtonEvent(data.id);
                    }
              }

              function resetCreateItemForm() {
                  $("input#assetType-pid").val('');
                  $("input#assetType-name").val('');
              }

        </script>

    </head>
 
    <body>
        资产科目一览
        <p/>
        <button id="create-item">创建大类</button>
        <div class="ui-widget">
            <table class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>id</th><th colspan="2">名称</th><th>操作</th>
                    </tr>
                </thead>
                <tbody id="item-table-body">
                <c:if test="${fn:length(assetTypes) > 0}">
                    <c:forEach items="${assetTypes}" var="assetType">
                        <script  type="text/javascript">
                            document.write(createItemRow('<c:out value="${assetType.id}"/>', '<c:out value="${assetType.name}" />'));
                            setButtonEvent('<c:out value="${assetType.id}"/>');
                        </script>
                        <c:if test="${fn:length(assetType.assetDetailTypes) > 0}">
                            <c:forEach items="${assetType.assetDetailTypes}" var="assetDetailType">
                                <script  type="text/javascript">
                                    document.write(createSubitemRow('<c:out value="${assetDetailType.id}"/>', '<c:out value="${assetDetailType.name}" />', '<c:out value="${assetDetailType.parentId}" />'));
                                    setButtonEvent('<c:out value="${assetDetailType.id}"/>', '<c:out value="${assetDetailType.parentId}" />');
                                </script>
                            </c:forEach>
                        </c:if>
                    </c:forEach>
                </c:if>
                </tbody>
            </table>
        </div>
        
        <div id="dialog-form" title="创建分类">
            <form id="create-item-form" action="<c:out value='${pageContext.request.contextPath}'/>/assettype/add" method="post">
                <input type="hidden" id="assetType-pid" name="parentId" />
                分类名称: <input type="text" id="assetType-name" name="name" />
            <form>
        </div>
    </body>


    
</html>
